<template>
    <div class="bigbox" @mouseleave="leave">
        <div @click="toggleDropdown" class="btn"> {{ inputname_ }} <img src="@/assets/imgs/icon/向下1.png" alt="">
        </div>
            <ul v-show="isDropdownOpen" class="uldrop">
                <li class="dropitem" v-for="option in options" :key="option.id" @click="selectOption(option)">
                    {{ option.label }}
                </li>
            </ul>
    </div>
</template>
  
<script>
export default {
    data() {
        return {
            isDropdownOpen: false,
            options: [
                { id: 1, label: "选项1" },
                { id: 2, label: "选项2" },
                { id: 3, label: "选项3" },
            ],
            inputname_: this.inputname
        };
    },
    props: {
        inputname: String
    },
    methods: {
        toggleDropdown() {
            this.isDropdownOpen = true;
        },
        selectOption(option) {
            console.log(option);
            this.inputname_ = option.label;
            this.isDropdownOpen = false;
        },
        leave() {
            console.log(this.isDropdownOpen);
            this.isDropdownOpen = false;
        }
    },
};
</script>
<style scoped>
.bigbox {
    display: inline-block;
}


.btn {
    width: 90px;
    height: 30px;
    color: #FFFFFF;
    background: rgba(0, 90, 100, 0);
    border: 1px solid #2C99AE;
    border-radius: 4px;
    line-height: 30px;
    font-size: 13px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    text-align: center;
    cursor: pointer;
}

.uldrop {
    width: 90px;
    height: auto;
    border: 1px solid #2C99AE;
    border-radius: 4px;
    position: absolute;
}

.dropitem {
    color: #FFFFFF;
    width: 90px;
    height: 30px;
    background: rgba(0, 90, 100, 0);
    border-radius: 4px;
    line-height: 30px;
    text-align: center;
    font-size: 12px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    cursor: pointer;
}


</style>